<template>
  <div class="content" v-if="info">
      <div class="info-box">
          <div class="info-header">
                <h3>
                    <img src="~assets/img/mall/icon_order.png" alt="">
                    订单详情
                </h3>
          </div>
          <div class="info-content">
              <div class="goods-info-box">
                  <div class="goods-cover-wrap">
                      <img :src="info.goods_pic" :alt="info.goods_name">
                  </div>
                  <div class="goods-description-wrap">
                      <h5>{{info.goods_name}}</h5>
                      <p>兑换积分：<span>{{info.goods_scores}}分</span></p>
                  </div>
              </div>
              <ul>
                  <li>
                      <span class="label">兑换数量</span>
                      <span class="info">{{info.goods_num}}</span>
                  </li>
                  <li>
                      <span class="label">积分总额</span>
                      <span class="info">{{info.total_scores}}</span>
                  </li>
                  <li>
                      <span class="label">兑换时间</span>
                      <span class="info">{{info.create_time}}</span>
                  </li>
                  <li>
                      <span class="label">订单编号</span>
                      <span class="info">{{info.order_no}}</span>
                  </li>
              </ul>
          </div>
      </div>
      <div class="info-box">
          <div class="info-header">
                <h3>
                    <img src="~assets/img/mall/icon_user.png" alt="">
                    收件人信息
                </h3>
          </div>
          <div class="info-content">
              <ul>
                  <li>
                      <span class="label">收货人</span>
                      <span class="info">{{info.receiver}}</span>
                  </li>
                  <li>
                      <span class="label">收货地址</span>
                      <span class="info">{{info.address}}</span>
                  </li>
                  <li>
                      <span class="label">联系电话</span>
                      <span class="info">{{info.phone}}</span>
                  </li>
              </ul>
          </div>
      </div>
      <div class="info-box">
          <div class="info-header">
                <h3>
                    <img src="~assets/img/mall/icon_truck.png" alt="">
                    物流信息
                </h3>
          </div>
          <div class="info-content">
              <ul>
                  <li>
                      <span class="label">物流状态</span>
                      <span class="info logistics-state">{{info.send_status}}</span>
                  </li>
                  <li>
                      <span class="label">物流公司</span>
                      <span class="info">{{info.send_company ? send_company : '---'}}</span>
                  </li>
                  <li>
                      <span class="label">物流单号</span>
                      <span class="info">{{info.send_no ? send_company : '---'}}</span>
                  </li>
              </ul>
          </div>
      </div>
  </div>
</template>
<script>
import { apiPost } from "src/common/api.js";
export default {
  name: "record-detsails",
  data() {
    return {
        info:null
    }
  },
  mounted() {
      if(!this.$route.params.id){
          this.$router.go(-1)
      }
      this.getInfo()
  },
  methods: {
      getInfo() {
        apiPost('order',{'order_id':this.$route.params.id}).then((res)=>{
            if(res.status === 0){
                this.info = res.data
            }else{
            console.log(res.msg)
            }
        })
      }
  }
};
</script>

<style lang="scss" scoped>
.info-box {
  padding: 0 15px;
  margin-bottom: 10px;
  border-bottom: 1px solid #d2d2d2;
  background: #fff;
  .info-header h3 {
    height: 60px;
    line-height: 60px;
    font-size: 17px;
    font-weight: 500;
    box-sizing: border-box;
    border-bottom: 1px solid #d2d2d2;
    img {
      width: 25px;
      object-fit: contain;
    }
  }
  .info-content {
    .goods-info-box {
      display: flex;
      align-items: flex-end;
      padding-top: 10px;
      .goods-cover-wrap {
        flex: none;
        width: 50%;
        padding-right: 5px;
        box-sizing: border-box;
        img {
          width: 100%;
          height: calc((50vw - 20px) * 0.74);
          object-fit: cover;
        }
      }
      .goods-description-wrap {
        flex: none;
        width: 50%;
        padding-left: 5px;
        text-align: right;
        box-sizing: border-box;
        h5 {
          font-size: 14px;
          font-weight: 400;
        }
        p {
          font-size: 13px;
          line-height: 1;
          span {
            color: #ff5a5a;
          }
        }
      }
    }
    ul {
      padding: 15px 0;
      li {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        line-height: 25px;
        span.label {
          flex: none;
          margin-right: 4em;
        }
        span.info {
          text-align: right;
        }
        .logistics-state{
            color: #ff5a5a;
        }
      }
    }
  }
}
</style>


